<template>
    <div class="cmt-container">
        <div class="cmt-title">
            <span>所有评论</span>
            <a href="#" @click.prevent="openpopup">发表评论</a>
        </div>
        <div class="cmt-content">
            <div class="cmt-item" v-for="(item, index) in comments" :key="item.add_time">
                <div class="cmt-item-title">
                    <span>{{ item.user_name }}</span>
                    <i>第{{ index+1 }}楼</i>
                </div>
                <div class="cmt-item-con">
                    {{ item.content === "undefined" ? "此用户很懒，什么都没说":item.content }}
                </div>
                <div class="cmt-item-time">{{ item.add_time | dateFormat("YYYY-MM-DD HH:mm:ss") }}</div>
            </div>
        </div>
        <div class="cmt-btnmore">
            <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
        </div>        

        <mt-popup v-model="commentvisible" position="bottom">
            <img src="../../../src/images/close.png" alt="" @click="closepopup">
            <h3>发表我的评论</h3>
            <textarea placeholder="请输入你的评论内容(最多只能评论200字)" maxlength="150" v-model="msg"></textarea>
            <div class="cmt-commentbtn">
                <mt-button type="primary" size="large" @click="postcomment">发表评论</mt-button>
            </div>            
        </mt-popup>
        
    </div>
</template>

<script>

import { Toast } from "mint-ui"

export default {
    data(){
        return {
            commentvisible:false,   // 控制 popup 的标识
            comments:[],             // 评论数据数组
            pageIndex:1,              // 评论数据的页码
            msg:""                // 评论输入的内容，双向绑定
        }
    },
    created(){
        this.getcomments();
    },
    methods:{
        openpopup(){     // 点击 发表评论 按钮弹出 popup
            this.commentvisible = true;
        },
        closepopup(){    // 点击 popup 的关闭按钮
            this.commentvisible = false;
        },
        getcomments(){   // 获取评论数据(需要新闻资讯id来获取对应评论，默认先获取第一页的评论数据)
            // console.log(this.newsId);
            this.$http.get("api/getcomments/" + this.id + "?pageindex=" + this.pageIndex).then((result) => {
                if(result.data.status === 0){
                    // 新数据 拼接 老数据，加载下一页的同时，把之前的数据拼接上这一页的数据即为想要的数据
                    this.comments = this.comments.concat(result.data.message);
                }else{
                    Toast("获取评论失败");
                }
            });
        },
        getmore(){    // 加载更多，其实就是点击加载下一页评论数据(实际就是将页码pageIndex++，然后再发多一次评论数据的请求，注意加载下一页时应该是老数据拼接上新数据，使用数组的concat连接)
            this.pageIndex ++;
            this.getcomments();
        },
        postcomment(){    // 点击发表评论
            // 校验评论内容是否为空
            if(this.msg.trim().length === 0){
               return Toast("评论内容不能为空");
            }

            // 校验通过，发起请求
            // 发表评论
            // 参数1：请求的url地址
            // 参数2：提交给服务器的数据对象 { content:this.msg.trim() }
            // 参数3：post定义提交时候，表单中数据的格式 { emulateJSON:true }，在 main.js 中 axios 全局配置 post 默认以普通表单方式提交方式，这里就不用再写了
            this.$http.post("api/postcomment/" + this.id,{
                content:this.msg.trim()
            }).then((result) => {
                if(result.data.status === 0){
                    this.closepopup();   // 关闭 popup 弹出层
                    // 组成一个对象，并放到 this.comments 数组的第一个中，这里已经将数据放到数据库了
                    var cmt = {
                        user_name:"匿名用户",
                        add_date:Date.now(),
                        content:this.msg.trim()
                    };
                    this.comments.unshift(cmt);
                    this.msg = "";
                }else{
                    Toast("提交评论失败");
                }
            });
        }
    },
    props:['id']     // 根据 父组件 传值给 子组件 ，在这里获取父组件的值
}
</script>

<style lang="scss">
.cmt-container{
    padding-top:10px;
    background:#ffffff;
    .cmt-title{
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        letter-spacing: 1px;
        border-bottom: 2px solid #ccc;
        padding: 0 10px 5px 10px;
        span{
            color:#8f8f94;
        }
        a{
            color:#26a2ff;
        }
    }
    .cmt-content{
        .cmt-item{
            padding: 10px;
            font-size:14px;
            letter-spacing: 1px;
            border-bottom: 1px solid #ccc;
            .cmt-item-title{
                display:flex;
                justify-content: space-between;
                align-items: center;
                span{
                    color: #8f8f94;
                }
                i{
                    font-style:normal;
                    color:#666;
                }
            }
            .cmt-item-con{
                text-align:justify;
                color:#333;
            }
            .cmt-item-time{
                letter-spacing:0;
                margin-top:5px;
                font-size:12px;
                color:#999;
            }
        }     
    }
    .cmt-btnmore{
        padding: 12px 10px 15px 10px;
    }
    .mint-popup-bottom{
        width: 100%;
        height: 58%;
        border-top-left-radius: 13px;
        border-top-right-radius: 13px;
        padding: 15px;
        text-align: right;
        img{
            width: 20px;
        }
        h3{
            font-size: 18px;
            font-weight:normal;
            text-align: left;
            margin:0;
            letter-spacing: 1px;
        }
        textarea{
            height:182px;
            font-size: 14px;
            margin-top: 15px;
            letter-spacing: 1px;
            border-radius: 5px;
            padding:10px;
            line-height: 20px;
            text-align: justify;
        }
        .cmt-commentbtn{
            position: fixed;
            bottom:15px;
            left:0;
            right:0;
            padding: 0 15px;
        }
    }
}
.mint-toast{
    z-index:2019;
}
</style>